<script setup>
import { ref, watch } from 'vue'

const open = ref(false)
const confirmLoading = ref(false)
const showModal = () => {
  open.value = true
}

defineExpose({ showModal })

const props = defineProps({
  userInfo: {
    type: Object
  },
  getTrainingList: {
    type: Function
  }
})
const userInfo = ref(props.userInfo)
const updateUserInfo = (newValue) => {
  userInfo.value = newValue
  console.log(newValue)
}

watch(
  () => props.userInfo,
  (newValue) => {
    updateUserInfo(newValue)
  }
)
</script>
<template>
  <div>
    <a-modal
      v-model:open="open"
      title="用户详细信息"
      width="50%"
      :confirm-loading="confirmLoading"
    >
      <a-descriptions :title="userInfo.name + '的个人信息'" bordered>
        <a-descriptions-item label="姓名">{{
          userInfo.name
        }}</a-descriptions-item>
        <a-descriptions-item label="用户名">{{
          userInfo.username
        }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">{{
          userInfo.id
        }}</a-descriptions-item>
        <a-descriptions-item label="所属单位">{{
          userInfo.organization
        }}</a-descriptions-item>
        <a-descriptions-item label="职业">{{
          userInfo.career
        }}</a-descriptions-item>
        <a-descriptions-item label="年龄"
          >{{ userInfo.age }}岁</a-descriptions-item
        >
        <a-descriptions-item label="联系电话">{{
          userInfo.phone
        }}</a-descriptions-item>
        <a-descriptions-item label="邮箱" :span="2">{{
          userInfo.email
        }}</a-descriptions-item>
        <a-descriptions-item label="账号状态">
          <a-badge
            v-if="userInfo.deleted === 0"
            status="processing"
            text="启用中"
          />
          <a-badge v-else status="error" text="被禁用" />
        </a-descriptions-item>
        <a-descriptions-item label="是否绑定微信账号">{{
          userInfo.hasBind ? '已绑定' : '未绑定'
        }}</a-descriptions-item>
        <a-descriptions label="创建时间">{{
          userInfo.createTime
        }}</a-descriptions>
        <a-descriptions-item label="更新时间">{{
          userInfo.updateTime
        }}</a-descriptions-item>
        <!-- <a-descriptions-item label="Config Info">
          Data disk type: MongoDB
          <br />
          Database version: 3.4
          <br />
          Package: dds.mongo.mid
          <br />
          Storage space: 10 GB
          <br />
          Replication factor: 3
          <br />
          Region: East China 1
          <br />
        </a-descriptions-item> -->
      </a-descriptions>
      <template v-slot:footer> </template>
    </a-modal>
  </div>
</template>
